<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1{ height:auto; margin:20px auto; overflow:hidden; border:1px #FFF solid; border-right:none; border-bottom:none; background-image:url(img/bg.jpg); background-size:cover;}
#ul1 li{ float:left; border:1px #FFF solid;border-left:none; border-top:none; background-size:cover;}
#ul1 li.active{ animation:.5s infinite linear flash; -webkit-animation:.5s infinite linear flash;}
@keyframes flash{
	0%{ opacity:0.1;}
	50%{ opacity:1;}
	100%{ opacity:0.1;}
}
@-webkit-keyframes flash{
	0%{ opacity:0.1;}
	50%{ opacity:1;}
	100%{ opacity:0.1;}
}
</style>
</head>

<body>
<ul id="ul1">
</ul>
<script>

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var sizeGird = 50;
var num = 8;
var iCount = 0;
var posArr = [];
var posArrAll = [];

init();

function init(){
	createGird();
	setQueen(0);
	//console.log( posArrAll );
	showImg();
}

function createGird(){
	var len = num * num;
	
	oUl.style.width = num * (sizeGird + 1) + 'px';
	
	for(var i=0;i<len;i++){
		var oLi = document.createElement('li');
		oLi.style.width = sizeGird + 'px';
		oLi.style.height = sizeGird + 'px';
		oLi.index = -1;
		//oLi.innerHTML = oLi.index;
		oUl.appendChild(oLi);
	}
	
	for(var i=0;i<num;i++){
		for(var j=0;j<num;j++){
			//i j num
			aLi[ i*num + j ].x = j;
			aLi[ i*num + j ].y = i;
			//aLi[ i*num + j ].innerHTML = j + ',' + i;
		}
	}
}

function setQueen(iQueen){
	
	if( iQueen == num ){
		posArrAll.push( posArr.concat() );
		iCount++;
		return;
	}
	
	for(var i=0;i<num;i++){
		
		if( aLi[ iQueen*num + i ].index == -1 ){
			aLi[ iQueen*num + i ].index = iQueen;
			//aLi[ iQueen*num + i ].innerHTML = iQueen;
			posArr.push(aLi[ iQueen*num + i ]);
			var x = aLi[ iQueen*num + i ].x;
			var y = aLi[ iQueen*num + i ].y;
			
			for(var j=0;j<aLi.length;j++){
				if( aLi[j].index == -1 && (aLi[j].x == x || aLi[j].y == y || aLi[j].x - aLi[j].y == x - y || aLi[j].x + aLi[j].y == x + y)  ){
					aLi[j].index = iQueen;
					//aLi[j].innerHTML = iQueen;
				}
			}
			
			setQueen( iQueen + 1 );
			
			//回溯
			posArr.pop();
			for(var j=0;j<aLi.length;j++){
				if( aLi[j].index == iQueen ){
					aLi[j].index = -1;
				}
			}
		
		}
	}
}

function showImg(){
	
	change();
	setInterval(change,2000);
	
	function change(){
		
		for(var i=0;i<aLi.length;i++){
			aLi[i].style.backgroundImage = '';
			aLi[i].className = '';
		}
		
		var randomLi = posArrAll[ Math.floor(posArrAll.length * Math.random()) ];
		
		for(var i=0;i<randomLi.length;i++){
			randomLi[i].style.backgroundImage = 'url(img/'+ Math.floor((Math.random()*11 + 1)) +'.jpg)';
			randomLi[i].className = 'active';
			randomLi[i].style.animationDelay = -Math.random()*2 + 's';
			randomLi[i].style.webkitAnimationDelay = -Math.random()*2 + 's';
		}
		
	}
	
}

</script>
</body>
</html>
